<template>
	<view class="message-detail-page">
		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<up-loading-icon></up-loading-icon>
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 消息详情 -->
		<view v-else-if="messageDetail" class="detail-container">
			<!-- 消息头部 -->
			<view class="message-header">
				<!-- 消息类型标签 -->
				<view class="type-tag" :class="`type-${messageDetail.type}`">
					<up-icon :name="getMessageIcon(messageDetail.type)" size="18" color="#ffffff"></up-icon>
					<text class="type-text">{{ getTypeLabel(messageDetail.type) }}</text>
				</view>

				<!-- 消息标题 -->
				<text class="message-title">{{ messageDetail.title }}</text>

				<!-- 发送者信息 -->
				<view v-if="messageDetail.senderName" class="sender-info">
					<up-image 
						:src="messageDetail.senderAvatar" 
						width="60rpx" 
						height="60rpx" 
						shape="circle"
					></up-image>
					<text class="sender-name">{{ messageDetail.senderName }}</text>
					<text class="send-time">{{ formatTime(messageDetail.createTime) }}</text>
				</view>
				<view v-else class="send-time-only">
					{{ formatTime(messageDetail.createTime) }}
				</view>
			</view>

			<!-- 消息内容 -->
			<view class="message-content">
				<text class="content-text">{{ messageDetail.content }}</text>
			</view>

			<!-- 关联内容 -->
			<view v-if="messageDetail.relatedTitle" class="related-content">
				<view class="related-header">
					<up-icon name="link" size="16" color="#667eea"></up-icon>
					<text class="related-label">相关内容</text>
				</view>
				<view class="related-card" @click="handleGoRelated">
					<text class="related-title">{{ messageDetail.relatedTitle }}</text>
					<up-icon name="arrow-right" size="16" color="#cccccc"></up-icon>
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="action-buttons">
				<up-button 
					v-if="messageDetail.relatedType === 'post'" 
					type="primary" 
					@click="handleGoRelated"
					size="large"
				>
					查看帖子
				</up-button>
				<up-button 
					v-else-if="messageDetail.relatedType === 'activity'" 
					type="primary" 
					@click="handleGoRelated"
					size="large"
				>
					查看活动
				</up-button>
				<up-button 
					v-else-if="messageDetail.relatedType === 'user'" 
					type="primary" 
					@click="handleGoRelated"
					size="large"
				>
					查看用户
				</up-button>
				<up-button 
					v-else
					type="info" 
					@click="handleGoBack"
					size="large"
				>
					返回
				</up-button>
			</view>
		</view>

		<!-- 错误状态 -->
		<view v-else class="error-container">
			<up-icon name="error-circle" size="80" color="#cccccc"></up-icon>
			<text class="error-text">消息不存在或已被删除</text>
			<up-button type="primary" @click="handleGoBack" plain>返回</up-button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getMessageDetail } from '../../server/api/message.js';
import { formatRelativeTime } from '../../utils/date.js';
import showToast from '../../utils/showToast.js';

// 消息ID
const messageId = ref(null);

// 消息详情
const messageDetail = ref(null);

// 加载状态
const loading = ref(true);

/**
 * 获取消息类型标签
 */
const getTypeLabel = (type) => {
	const typeMap = {
		reply: '回复',
		system: '系统',
		official: '官方',
		activity: '活动',
		other: '其它'
	};
	return typeMap[type] || '消息';
};

/**
 * 获取消息图标
 */
const getMessageIcon = (type) => {
	const iconMap = {
		reply: 'chat',
		system: 'setting',
		official: 'account',
		activity: 'calendar',
		other: 'bell'
	};
	return iconMap[type] || 'bell';
};

/**
 * 格式化时间
 */
const formatTime = (timestamp) => {
	return formatRelativeTime(timestamp);
};

/**
 * 加载消息详情
 */
const loadMessageDetail = async () => {
	if (!messageId.value) {
		loading.value = false;
		return;
	}

	try {
		loading.value = true;
		const res = await getMessageDetail(messageId.value);
		
		if (res.code === 200) {
			messageDetail.value = res.data;
		} else {
			showToast(res.message || '加载失败', 'error');
		}
	} catch (error) {
		console.error('加载消息详情失败:', error);
		showToast('加载失败', 'error');
	} finally {
		loading.value = false;
	}
};

/**
 * 跳转到关联内容
 */
const handleGoRelated = () => {
	if (!messageDetail.value) return;

	const { relatedType, relatedId } = messageDetail.value;

	if (relatedType === 'post' && relatedId) {
		uni.navigateTo({
			url: `/pages/post/postInfo?postId=${relatedId}`
		});
	} else if (relatedType === 'activity' && relatedId) {
		uni.navigateTo({
			url: `/pages/activity/activityDetail?activityId=${relatedId}`
		});
	} else if (relatedType === 'user' && relatedId) {
		uni.navigateTo({
			url: `/pages/user/userInfo?userId=${relatedId}`
		});
	}
};

/**
 * 返回
 */
const handleGoBack = () => {
	uni.navigateBack();
};

// 页面加载
onLoad((options) => {
	if (options.messageId) {
		messageId.value = parseInt(options.messageId);
		loadMessageDetail();
	} else {
		loading.value = false;
	}
});
</script>

<style lang="scss" scoped>
@import '../../styles/variables.scss';
@import '../../styles/mixins.scss';

.message-detail-page {
	min-height: 100vh;
	background: $bg-page;
}

// 加载容器
.loading-container {
	@include flex-center;
	flex-direction: column;
	padding: 200rpx $spacing-xl;

	.loading-text {
		margin-top: $spacing-base;
		font-size: $font-sm;
		color: $text-tertiary;
	}
}

// 详情容器
.detail-container {
	padding: $spacing-xl;
}

// 消息头部
.message-header {
	background: $bg-card;
	border-radius: $radius-lg;
	padding: $spacing-xxl;
	margin-bottom: $spacing-lg;
	box-shadow: $shadow-sm;

	.type-tag {
		display: inline-flex;
		align-items: center;
		padding: $spacing-xs $spacing-base;
		border-radius: $radius-sm;
		margin-bottom: $spacing-lg;

		.type-text {
			margin-left: $spacing-xs;
			font-size: $font-xs;
			color: #ffffff;
			font-weight: $font-medium;
		}

		&.type-reply {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		}

		&.type-system {
			background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
		}

		&.type-official {
			background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
		}

		&.type-activity {
			background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
		}

		&.type-other {
			background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
		}
	}

	.message-title {
		display: block;
		font-size: $font-xl;
		font-weight: $font-bold;
		color: $text-primary;
		line-height: $line-height-lg;
		margin-bottom: $spacing-lg;
	}

	.sender-info {
		display: flex;
		align-items: center;

		.sender-name {
			margin-left: $spacing-base;
			font-size: $font-sm;
			color: $text-secondary;
			font-weight: $font-medium;
		}

		.send-time {
			font-size: $font-xs;
			color: $text-tertiary;
			margin-left: auto;
		}
	}

	.send-time-only {
		font-size: $font-sm;
		color: $text-tertiary;
	}
}

// 消息内容
.message-content {
	background: $bg-card;
	border-radius: $radius-lg;
	padding: $spacing-xxl;
	margin-bottom: $spacing-lg;
	box-shadow: $shadow-sm;

	.content-text {
		display: block;
		font-size: $font-base;
		color: $text-primary;
		line-height: $line-height-lg;
		white-space: pre-wrap;
		word-break: break-all;
	}
}

// 关联内容
.related-content {
	background: $bg-card;
	border-radius: $radius-lg;
	padding: $spacing-lg $spacing-xxl;
	margin-bottom: $spacing-lg;
	box-shadow: $shadow-sm;

	.related-header {
		display: flex;
		align-items: center;
		margin-bottom: $spacing-base;

		.related-label {
			margin-left: $spacing-xs;
			font-size: $font-sm;
			color: $text-secondary;
			font-weight: $font-medium;
		}
	}

	.related-card {
		@include flex-between;
		background: rgba($color-primary, 0.05);
		padding: $spacing-lg;
		border-radius: $radius-md;
		border-left: 4px solid $color-primary;
		transition: all $transition-fast;

		.related-title {
			flex: 1;
			font-size: $font-base;
			color: $text-primary;
			@include ellipsis;
		}

		&:active {
			transform: scale(0.98);
			opacity: 0.8;
		}
	}
}

// 操作按钮
.action-buttons {
	margin-top: $spacing-xxl;

	.u-button {
		width: 100%;
		height: 90rpx;
		font-size: $font-base;
	}
}

// 错误容器
.error-container {
	@include flex-center;
	flex-direction: column;
	padding: 200rpx $spacing-xl;

	.error-text {
		margin: $spacing-lg 0 $spacing-xxl;
		font-size: $font-base;
		color: $text-tertiary;
	}

	.u-button {
		width: 400rpx;
	}
}
</style>
